<template>
    <div>
        <div class="container"
             :style='{"minHeight":"100vh","alignItems":"center","background":"url(https://img-baofun.zhhainiao.com/fs/3fc54f2b553dc552c23fd2df0ee0159e.jpg)","display":"flex","width":"100%","backgroundSize":"cover","backgroundPosition":"center center","backgroundRepeat":"no-repeat","justifyContent":"center"}'>
            <el-form v-if="pageFlag=='register'"
                     :style='{"padding":"20px","boxShadow":"0 1px 20px rgba(64, 158, 255, .5)","margin":"50px 0","borderRadius":"10px","background":"rgba(256,256,256,.75)","width":"550px","height":"auto"}'
                     ref="rgsForm" class="rgs-form" :model="rgsForm" :rules="rules">
                <div v-if="true"
                     :style='{"width":"100%","margin":"0 0 10px 0","lineHeight":"64px","fontSize":"20px","color":"#000","textAlign":"center"}'
                     class="title">购买鸭超市外卖注册
                </div>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='yonghu'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('yonghuzhanghao')?'required':''">用户账号：
                    </div>
                    <el-input v-model="ruleForm.yonghuzhanghao" autocomplete="off" placeholder="用户账号" type="text"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='yonghu'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('mima')?'required':''">密码：
                    </div>
                    <el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='yonghu'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('mima')?'required':''">确认密码：
                    </div>
                    <el-input v-model="ruleForm.mima2" autocomplete="off" placeholder="确认密码" type="password"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='yonghu'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('yonghuxingming')?'required':''">用户姓名：
                    </div>
                    <el-input v-model="ruleForm.yonghuxingming" autocomplete="off" placeholder="用户姓名" type="text"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='yonghu'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('xingbie')?'required':''">性别：
                    </div>
                    <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
                        <el-option
                                v-for="(item,index) in yonghuxingbieOptions"
                                v-bind:key="index"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='yonghu'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('yonghudianhua')?'required':''">用户电话：
                    </div>
                    <el-input v-model="ruleForm.yonghudianhua" autocomplete="off" placeholder="用户电话" type="text"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='yonghu'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('touxiang')?'required':''">头像：
                    </div>
                    <file-upload
                            tip="点击上传头像"
                            action="file/upload"
                            :limit="3"
                            :multiple="true"
                            :fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"
                            @change="yonghutouxiangUploadChange"
                    ></file-upload>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='qishou'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('qishouzhanghao')?'required':''">骑手账号：
                    </div>
                    <el-input v-model="ruleForm.qishouzhanghao" autocomplete="off" placeholder="骑手账号" type="text"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='qishou'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('mima')?'required':''">密码：
                    </div>
                    <el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='qishou'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('mima')?'required':''">确认密码：
                    </div>
                    <el-input v-model="ruleForm.mima2" autocomplete="off" placeholder="确认密码" type="password"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='qishou'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('qishouxingming')?'required':''">骑手姓名：
                    </div>
                    <el-input v-model="ruleForm.qishouxingming" autocomplete="off" placeholder="骑手姓名" type="text"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='qishou'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('xingbie')?'required':''">性别：
                    </div>
                    <el-select v-model="ruleForm.xingbie" placeholder="请选择性别">
                        <el-option
                                v-for="(item,index) in qishouxingbieOptions"
                                v-bind:key="index"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='qishou'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('qishoudianhua')?'required':''">骑手电话：
                    </div>
                    <el-input v-model="ruleForm.qishoudianhua" autocomplete="off" placeholder="骑手电话" type="text"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='qishou'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('touxiang')?'required':''">头像：
                    </div>
                    <file-upload
                            tip="点击上传头像"
                            action="file/upload"
                            :limit="3"
                            :multiple="true"
                            :fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"
                            @change="qishoutouxiangUploadChange"
                    ></file-upload>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='shangjia'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('shangjiazhanghao')?'required':''">商家账号：
                    </div>
                    <el-input v-model="ruleForm.shangjiazhanghao" autocomplete="off" placeholder="商家账号"
                              type="text"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='shangjia'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('mima')?'required':''">密码：
                    </div>
                    <el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="password"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='shangjia'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('mima')?'required':''">确认密码：
                    </div>
                    <el-input v-model="ruleForm.mima2" autocomplete="off" placeholder="确认密码" type="password"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='shangjia'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('shangjiamingcheng')?'required':''">商家名称：
                    </div>
                    <el-input v-model="ruleForm.shangjiamingcheng" autocomplete="off" placeholder="商家名称"
                              type="text"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='shangjia'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('shangjiadizhi')?'required':''">商家地址：
                    </div>
                    <el-input v-model="ruleForm.shangjiadizhi" autocomplete="off" placeholder="商家地址" type="text"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='shangjia'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('shangjiadianhua')?'required':''">商家电话：
                    </div>
                    <el-input v-model="ruleForm.shangjiadianhua" autocomplete="off" placeholder="商家电话" type="text"/>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='shangjia'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('shangjiafengmian')?'required':''">商家封面：
                    </div>
                    <file-upload
                            tip="点击上传商家封面"
                            action="file/upload"
                            :limit="3"
                            :multiple="true"
                            :fileUrls="ruleForm.shangjiafengmian?ruleForm.shangjiafengmian:''"
                            @change="shangjiashangjiafengmianUploadChange"
                    ></file-upload>
                </el-form-item>
                <el-form-item :style='{"width":"80%","padding":"0","margin":"0 auto 2px","height":"auto"}'
                              class="list-item" v-if="tableName=='shangjia'">
                    <div v-if="true"
                         :style='{"width":"100%","lineHeight":"44px","fontSize":"14px","position":"relative","color":"#000"}'
                         class="lable" :class="changeRules('shangjiajingying')?'required':''">商家经营：
                    </div>
                    <el-input v-model="ruleForm.shangjiajingying" autocomplete="off" placeholder="商家经营"
                              type="text"/>
                </el-form-item>
                <button :style='{"border":"0","cursor":"pointer","padding":"0 10px","margin":"20px auto 5px","outline":"none","color":"#000","borderRadius":"8px","background":"#6f7dff","display":"block","width":"80%","fontSize":"16px","height":"44px"}'
                        type="button" class="r-btn" @click="login()">注册
                </button>
                <div :style='{"cursor":"pointer","padding":"0 10%","margin":"20px 0 0","color":"rgba(159, 159, 159, 1)","textAlign":"center","display":"block","lineHeight":"2","fontSize":"16px","textDecoration":"underline"}'
                     class="r-login" @click="close()">已有账号，直接登录
                </div>
            </el-form>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ruleForm: {},
            forgetForm: {},
            pageFlag: '',
            tableName: "",
            rules: {},
            yonghuxingbieOptions: [],
            qishouxingbieOptions: [],
        };
    },
    mounted() {
        this.pageFlag = this.$route.query.pageFlag
        if (this.$route.query.pageFlag == 'register') {

            let table = this.$storage.get("loginTable");
            this.tableName = table;
            if (this.tableName == 'yonghu') {
                this.ruleForm = {
                    yonghuzhanghao: '',
                    mima: '',
                    yonghuxingming: '',
                    xingbie: '',
                    yonghudianhua: '',
                    touxiang: '',
                    money: '',
                    vip: '',
                }
            }
            if (this.tableName == 'qishou') {
                this.ruleForm = {
                    qishouzhanghao: '',
                    mima: '',
                    qishouxingming: '',
                    xingbie: '',
                    qishoudianhua: '',
                    touxiang: '',
                    money: '',
                }
            }
            if (this.tableName == 'shangjia') {
                this.ruleForm = {
                    shangjiazhanghao: '',
                    mima: '',
                    shangjiamingcheng: '',
                    shangjiadizhi: '',
                    shangjiadianhua: '',
                    shangjiafengmian: '',
                    shangjiajingying: '',
                    money: '',
                }
            }
            if ('yonghu' == this.tableName) {
                this.rules.yonghuzhanghao = [{required: true, message: '请输入用户账号', trigger: 'blur'}]
            }
            if ('yonghu' == this.tableName) {
                this.rules.mima = [{required: true, message: '请输入密码', trigger: 'blur'}]
            }
            if ('yonghu' == this.tableName) {
                this.rules.yonghuxingming = [{required: true, message: '请输入用户姓名', trigger: 'blur'}]
            }
            if ('qishou' == this.tableName) {
                this.rules.qishouzhanghao = [{required: true, message: '请输入骑手账号', trigger: 'blur'}]
            }
            if ('qishou' == this.tableName) {
                this.rules.mima = [{required: true, message: '请输入密码', trigger: 'blur'}]
            }
            if ('qishou' == this.tableName) {
                this.rules.qishouxingming = [{required: true, message: '请输入骑手姓名', trigger: 'blur'}]
            }
            if ('shangjia' == this.tableName) {
                this.rules.shangjiazhanghao = [{required: true, message: '请输入商家账号', trigger: 'blur'}]
            }
            if ('shangjia' == this.tableName) {
                this.rules.mima = [{required: true, message: '请输入密码', trigger: 'blur'}]
            }
            if ('shangjia' == this.tableName) {
                this.rules.shangjiamingcheng = [{required: true, message: '请输入商家名称', trigger: 'blur'}]
            }
            this.yonghuxingbieOptions = "男,女".split(',')
            this.qishouxingbieOptions = "男,女".split(',')
        }
    },
    created() {
    },
    destroyed() {
    },
    methods: {
        changeRules(name) {
            if (this.rules[name]) {
                return true
            }
            return false
        },
        // 获取uuid
        getUUID() {
            return new Date().getTime();
        },
        close() {
            this.$router.push({path: "/login"});
        },
        yonghutouxiangUploadChange(fileUrls) {
            this.ruleForm.touxiang = fileUrls;
        },
        qishoutouxiangUploadChange(fileUrls) {
            this.ruleForm.touxiang = fileUrls;
        },
        shangjiashangjiafengmianUploadChange(fileUrls) {
            this.ruleForm.shangjiafengmian = fileUrls;
        },

        // 多级联动参数


        // 注册
        login() {
            var url = this.tableName + "/register";
            if ((!this.ruleForm.yonghuzhanghao) && `yonghu` == this.tableName) {
                this.$message.error(`用户账号不能为空`);
                return
            }
            if ((!this.ruleForm.mima) && `yonghu` == this.tableName) {
                this.$message.error(`密码不能为空`);
                return
            }
            if ((this.ruleForm.mima != this.ruleForm.mima2) && `yonghu` == this.tableName) {
                this.$message.error(`两次密码输入不一致`);
                return
            }
            if ((!this.ruleForm.yonghuxingming) && `yonghu` == this.tableName) {
                this.$message.error(`用户姓名不能为空`);
                return
            }
            if (`yonghu` == this.tableName && this.ruleForm.yonghudianhua && (!this.$validate.isMobile(this.ruleForm.yonghudianhua))) {
                this.$message.error(`用户电话应输入手机格式`);
                return
            }
            if (this.ruleForm.touxiang != null) {
                this.ruleForm.touxiang = this.ruleForm.touxiang.replace(new RegExp(this.$base.url, "g"), "");
            }
            if ((!this.ruleForm.qishouzhanghao) && `qishou` == this.tableName) {
                this.$message.error(`骑手账号不能为空`);
                return
            }
            if ((!this.ruleForm.mima) && `qishou` == this.tableName) {
                this.$message.error(`密码不能为空`);
                return
            }
            if ((this.ruleForm.mima != this.ruleForm.mima2) && `qishou` == this.tableName) {
                this.$message.error(`两次密码输入不一致`);
                return
            }
            if ((!this.ruleForm.qishouxingming) && `qishou` == this.tableName) {
                this.$message.error(`骑手姓名不能为空`);
                return
            }
            if (`qishou` == this.tableName && this.ruleForm.qishoudianhua && (!this.$validate.isMobile(this.ruleForm.qishoudianhua))) {
                this.$message.error(`骑手电话应输入手机格式`);
                return
            }
            if (this.ruleForm.touxiang != null) {
                this.ruleForm.touxiang = this.ruleForm.touxiang.replace(new RegExp(this.$base.url, "g"), "");
            }
            if ((!this.ruleForm.shangjiazhanghao) && `shangjia` == this.tableName) {
                this.$message.error(`商家账号不能为空`);
                return
            }
            if ((!this.ruleForm.mima) && `shangjia` == this.tableName) {
                this.$message.error(`密码不能为空`);
                return
            }
            if ((this.ruleForm.mima != this.ruleForm.mima2) && `shangjia` == this.tableName) {
                this.$message.error(`两次密码输入不一致`);
                return
            }
            if ((!this.ruleForm.shangjiamingcheng) && `shangjia` == this.tableName) {
                this.$message.error(`商家名称不能为空`);
                return
            }
            if (`shangjia` == this.tableName && this.ruleForm.shangjiadianhua && (!this.$validate.isMobile(this.ruleForm.shangjiadianhua))) {
                this.$message.error(`商家电话应输入手机格式`);
                return
            }
            if (this.ruleForm.shangjiafengmian != null) {
                this.ruleForm.shangjiafengmian = this.ruleForm.shangjiafengmian.replace(new RegExp(this.$base.url, "g"), "");
            }
            this.$http({
                url: url,
                method: "post",
                data: this.ruleForm
            }).then(({data}) => {
                if (data && data.code === 0) {
                    this.$message({
                        message: "注册成功",
                        type: "success",
                        duration: 1500,
                        onClose: () => {
                            this.$router.replace({path: "/login"});
                        }
                    });
                } else {
                    this.$message.error(data.msg);
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  background: url(https://img-baofun.zhhainiao.com/fs/3fc54f2b553dc552c23fd2df0ee0159e.jpg);

  .el-date-editor.el-input {
    width: 100%;
  }

  .rgs-form .el-input /deep/ .el-input__inner {
    border: 1;
    border-radius: 8px;
    padding: 0 10px;
    color: rgba(64, 158, 255, 1);
    width: 100%;
    font-size: 14px;
    height: 44px;
  }

  .rgs-form .el-select /deep/ .el-input__inner {
    border: 1;
    border-radius: 8px;
    padding: 0 10px;
    outline: none;
    color: #6f7dff;
    width: 288px;
    font-size: 14px;
    height: 44px;
  }

  .rgs-form .el-date-editor /deep/ .el-input__inner {
    border: 1;
    border-radius: 8px;
    padding: 0 10px 0 30px;
    outline: none;
    color: #6f7dff;
    width: 288px;
    font-size: 14px;
    height: 44px;
  }

  .rgs-form .el-date-editor /deep/ .el-input__inner {
    border: 1;
    border-radius: 8px;
    padding: 0 10px 0 30px;
    outline: none;
    color: #6f7dff;
    width: 288px;
    font-size: 14px;
    height: 44px;
  }

  .rgs-form /deep/ .el-upload--picture-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    width: auto;
    height: auto;
    line-height: initial;
    vertical-align: middle;
  }

  .rgs-form /deep/ .upload .upload-img {
    cursor: pointer;
    border-radius: 8px;
    color: #6f7dff;
    background: #fff;
    object-fit: cover;
    width: 90px;
    font-size: 32px;
    line-height: 60px;
    text-align: center;
    height: 60px;
  }

  .rgs-form /deep/ .el-upload-list .el-upload-list__item {
    cursor: pointer;
    border-radius: 8px;
    color: #6f7dff;
    background: #fff;
    object-fit: cover;
    width: 90px;
    font-size: 32px;
    line-height: 60px;
    text-align: center;
    height: 60px;
  }

  .rgs-form /deep/ .el-upload .el-icon-plus {
    cursor: pointer;
    border-radius: 8px;
    color: #6f7dff;
    background: #fff;
    object-fit: cover;
    width: 90px;
    font-size: 32px;
    line-height: 60px;
    text-align: center;
    height: 60px;
  }
}

.required {
  position: relative;
}

.required::after {
  color: red;
  left: -10px;
  position: absolute;
  content: "*";
}

.editor > .avatar-uploader {
  line-height: 0;
  height: 0;
}
</style>
